<div class="console">
    <i class="icon" *ngIf="!playerState" nz-icon [iconfont]="'iconkaishi'" (click)="start()"></i>
    <i class="icon" *ngIf="playerState" nz-icon [iconfont]="'icontingzhi1'" (click)="pause()"></i>
    <div style="vertical-align: top;display: inline-block;line-height: 70px">阅读速度:
        <nz-input-number [(ngModel)]="reader.speed" [nzMin]="200" [nzMax]="2000" [nzStep]="50"></nz-input-number>
        /分钟
    </div>
    <div style="vertical-align: top;display: inline-block;line-height: 70px;margin-left: 16px">训练时间:
        <nz-input-number [nzDisabled]="readerState" [(ngModel)]="trainingTime" [nzMin]="20" [nzMax]="2000" [nzStep]="50"></nz-input-number>
        秒
    </div>
</div>

<nz-layout>
    <nz-sider nzWidth="200px" nzTheme="light">
        <div class="sider">
            <h4>我的书单
                <nz-upload *ngIf="userUploadState" [nzName]="'files'" [nzAccept]="'text/plain'"
                           [(nzFileList)]="userFileList"
                           [nzBeforeUpload]="userBeforeUpload"
                           nzMultiple
                           [nzLimit]="1"
                           nzAction="/user/upload">
                    <button [nzSize]="'small'" title="点我上传哦" nz-button nzType="default" nzShape="circle">
                        <i
                            nz-icon
                            nzType="upload"></i>
                    </button>
                </nz-upload>

                <button *ngIf="!userUploadState" [nzLoading]="true"
                        [nzSize]="'small'"
                        title="点我上传哦" nz-button nzType="default"
                        nzShape="circle"><i
                    nz-icon
                    nzType="upload"></i>
                </button>
            </h4>
            <ul>
                <li *ngFor="let i of userBookList?.data" [title]="i.bookName"
                    [ngClass]="currentArticleId === i.userBooksId? 'ant-menu-item-selected' : ''"
                    (click)="fetchBookContent(i.userBooksId)">{{i.bookName}}</li>
            </ul>
            <div class="">
                <nz-pagination [nzTotal]="userBookList.total" nzSimple [nzPageSize]="10"
                               (nzPageIndexChange)="userPageIndexChange($event)"></nz-pagination>
            </div>
            <h4 style="margin-top: 16px">推荐书单
                <!--                <nz-upload *ngIf="recommendedUploadState" [nzName]="'files'" [nzAccept]="'text/plain'"-->
                <!--                           [(nzFileList)]="recommendedFileList"-->
                <!--                           [nzBeforeUpload]="recommendedBeforeUpload"-->
                <!--                           nzMultiple-->
                <!--                           [nzLimit]="1"-->
                <!--                           nzAction="/recommended/upload">-->
                <!--                    <button nzShape="circle" [nzSize]="'small'" title="点我上传哦" nz-button nzType="default">-->
                <!--                        <i-->
                <!--                            nz-icon-->
                <!--                            nzType="upload"></i>-->
                <!--                    </button>-->
                <!--                </nz-upload>-->

                <!--                <button *ngIf="!recommendedUploadState" [nzLoading]="true"-->
                <!--                        [nzSize]="'small'"-->
                <!--                        title="点我上传哦" nz-button nzType="default"-->
                <!--                        nzShape="circle"><i-->
                <!--                    nz-icon-->
                <!--                    nzType="upload"></i>-->
                <!--                </button>-->
            </h4>
            <ul>
                <li *ngFor="let i of recommendedBookList?.data" title="{{i.bookName}}"
                    [ngClass]="currentArticleId === i.recommendedBooksId ? 'ant-menu-item-selected' : ''"
                    (click)="fetchBookContent(i.recommendedBooksId)">{{i.bookName}}</li>
            </ul>
            <div class="">
                <nz-pagination [nzTotal]="recommendedBookList.total" nzSimple [nzPageSize]="10"
                               (nzPageIndexChange)="recommendedPageIndexChange($event)"></nz-pagination>
            </div>
        </div>
    </nz-sider>
    <nz-layout class="inner-layout">
        <nz-content class="content" id="scroll-content">
            <section id="article-details" class="article-details">
                <div [innerHTML]="articleDetails | safe:'html'"></div>
            </section>
        </nz-content>
    </nz-layout>
</nz-layout>
